import React, {useEffect, useState} from "react";
import {Dimensions, StyleSheet, TextInput, TouchableHighlight, View} from "react-native";
import {
    addWallet,
    getChainBaseByChainID,
    getChainInfo,
    updateNowWallet,
    useWalletType,
    walletInfoType
} from "./smartxL2Libs/L2_Data";
import {CheckBox, Text} from "react-native-elements";
import {fontSize_15} from "./theme";
import SimpleToast from "react-native-simple-toast";
import {createNewMnemonic, getWalletByPrivateKey} from "./smartxL2Libs/smartxL2Web3";

const {width,height,scale} = Dimensions.get("window");

const L2_CreateWalletFirst = ({navigation,route}:any) => {
    //链信息
    const [providerUrl,setProviderUrl] = useState(route?.params?.providerUrl)
    const [chainID,setChainID] = useState(route?.params?.chainID)
    //钱包信息
    const [walletName,setWalletName] = useState("")
    const [password,setPassword] = useState("")
    const [passwordCheck,setPasswordCheck] = useState("")
    const [tip,setTip] = useState("")
    const [read, setRead] = useState(false);
    //助记词
    const [mnemonic,setMnemonic] = useState("")
    useEffect(()=>{
        navigation.setOptions({
            title:"创建钱包"
        })
        console.log(chainID,providerUrl)
        initNewWalletName(chainID)
    },[])
    const initNewWalletName = async (chainID:string) => {
        let net = await getChainBaseByChainID(chainID)
        if(!net)
        {
            return "";
        }
        let walletListNet = await getChainInfo(chainID);
        let name = net.coinName+"-"+(walletListNet.walletList.length+1).toString();
        setWalletName(name)
    }
    const createWallet = async () => {
        if(!read)
        {
            SimpleToast.show("您尚未阅读并同意服务及隐私条款");
            return ;
        }
        if(password==="")
        {
            SimpleToast.show("请输入密码");
            return ;
        }
        if(passwordCheck !== password)
        {
            SimpleToast.show("密码不一致");
            return ;
        }
        let mnemonicTemp = createNewMnemonic();
        let mnemonicList = mnemonicTemp.split(" ");
        console.log(`createWallet`)
        console.log(mnemonicTemp,mnemonicList)
        setMnemonic(mnemonicTemp);
        navigation.navigate("L2_MnemonicView",{mnemonic:mnemonicList,walletInfo:{password,walletName,providerUrl,tip},chainID});
    }
    return (
        <View style={styles.container}>
            <Text style={{fontSize:fontSize_15,alignSelf:"flex-start",paddingTop:10}}>
                钱包名称
            </Text>
            <TextInput
                placeholder={walletName}
                onChangeText={value => setWalletName(value.trim())}
                style={{
                    width:"100%",fontSize:fontSize_15,padding:0,
                    paddingTop:10,borderBottomWidth:5/scale,
                    borderBottomColor:"#f0f2f3", paddingBottom:10}}
            />
            <Text style={{fontSize:fontSize_15,alignSelf:"flex-start",paddingTop:10}}>
                钱包密码
            </Text>
            <TextInput
                placeholder={"请输入密码"}
                onChangeText={value => setPassword(value.trim())}
                style={{
                    width:"100%",fontSize:fontSize_15,padding:0,
                    paddingTop:10,borderBottomWidth:5/scale,
                    borderBottomColor:"#f0f2f3", paddingBottom:10}}
            />
            <TextInput
                placeholder={"重复密码"}
                onChangeText={value => setPasswordCheck(value.trim())}
                style={{
                    width:"100%",fontSize:fontSize_15,padding:0,
                    paddingTop:10,borderBottomWidth:5/scale,
                    borderBottomColor:"#f0f2f3", paddingBottom:10}}
            />
            <Text style={{fontSize:fontSize_15,alignSelf:"flex-start",paddingTop:10}}>
                提示信息
            </Text>
            <TextInput
                placeholder={"密码提示信息（可不填）"}
                onChangeText={value => setTip(value.trim())}
                style={{
                    width:"100%",fontSize:fontSize_15,padding:0,
                    paddingTop:10,borderBottomWidth:5/scale,
                    borderBottomColor:"#f0f2f3", paddingBottom:10}}
            />
            <View
                style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent:"flex-start",
                    width:'100%',
                    height:50
                }}
            >
                <CheckBox
                    // checkedIcon='dot-circle-o'
                    // uncheckedIcon='circle-o'
                    size={18}
                    checked={read}
                    onPress={() => setRead(!read)}
                    containerStyle={{ margin: 0, padding: 0,marginLeft:0 }}
                    checkedColor='#2980fe'
                />
                <Text style={{fontSize:fontSize_15}}>我已阅读并同意</Text>
                <Text
                    onPress={() => {}}
                    style={{ paddingLeft: 4, color: '#2a81fe',fontSize:fontSize_15 }}
                >《服务及隐私条款》</Text>
            </View>
            <TouchableHighlight underlayColor={"transparent"} onPress={()=>{
                createWallet()
            }}>
                <View style={styles.importBTN}>
                    <Text style={{fontSize:fontSize_15,color:"white"}}>创建钱包</Text>
                </View>
            </TouchableHighlight>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: "white"
    },
    keyInputContainer:{
        width:"100%",
        height:80,
        fontSize:fontSize_15,
        lineHeight:50,
        borderWidth:1/scale,
        borderColor: '#BFBFBFFF',
        borderRadius: 6,
        backgroundColor: '#F8FAFCFF',
        textAlignVertical:"top",
        textAlign:"left",
        padding:15,
        // paddingTop:0,
        // paddingBottom:0,
        flexWrap:"wrap",
    },
    importBTN:{
        marginTop:20,
        marginBottom:20,
        width:width-20,
        borderRadius:5,
        height:40,
        backgroundColor:"#2980fe",
        alignItems:"center",
        justifyContent:"center"
    }
})
export default L2_CreateWalletFirst;


